<template>
	<view class="container">
		<u-navbar
			title="我的钱包" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<view class="content">
			<z-paging
				ref="paging"
				v-model="dataLists"
				@query="getTabs" 
				auto-show-back-to-top 
				:empty-view-text="emptyText" 
				:empty-view-img="emptyImg" 
			>
				<template v-slot:top >
					<view class="content_top" :style="{ 'margin-top': sHeight }">
						<image class="content_top_image" src="../../static/images/img_wallet_bg.png" mode=""></image>
						<view class="content_top_container flex justify-btw align-center">
							<view class="left">
								<view class="top flex justify-start align-start">
									<text>钱包余额</text>
									<image 
										style="width: 28rpx; height: 28rpx; margin-left: 10rpx;" 
										src="../../static/images/icon_explain_white.png" 
										mode=""
										@tap.stop="ToAgreement()"
									></image>
								</view>
								<text class="bottom">{{ balance }}</text>
							</view>
							<view 
								class="right flex justify-center align-center"
								@tap.stop="ToWithdraw"
							>提现</view>
						</view>
					</view>
					<!-- 导航 -->
					<view style="margin-top: 40rpx;">
						<u-tabs
							style="margin-top: 40rpx;font-size: 34rpx;"
							:list="tabList" 
							:duration="0.3"
							bg-color="#fff"
							:is-scroll="false" 
							v-model="current" 
							@change="handleChangeTab"
							active-color="#333"
							inactive-color="#666"
							:bar-style="barStyle"
						></u-tabs>
					</view>
				</template>
				<view class="content_list">
					<!-- 明细列表 -->
					<block v-if="current==0">
						<!-- <z-paging
							ref="paging"
							v-model="dataList_1"
							@query="getTab1" 
							auto-show-back-to-top 
							:empty-view-text="emptyText" 
							:empty-view-img="emptyImg" 
						> -->
							<view
								class="content_list_item flex justify-btw align-center" 
								v-for="(item, index) in dataLists"
								:key="item.id"
							>
								<view class="left flex flex_clm justify-btw align-start">
									<!-- item.recordType=='01' ? '佣金收益'
									: item.recordType=='02' ? '提现返还'
									: item.recordType=='11' ? '提现申请'
									: item.recordType=='12' ? '订单支付'
									: '' -->
									<text class="text_1">{{ item.record }}</text>
									<text class="text_3" style="margin-top: 4rpx;">{{item.createTime}}</text>
								</view>
								<view class="right flex_clm justify-btw align-end">
									<text class="text_2">{{item.price}}</text>
									<text class="text_3" style="margin-top: 4rpx;">余额：{{ item.currentBalance }}</text>
								</view>
							</view>
						<!-- </z-paging> -->
					</block>
					<!-- 提现记录 -->
					<block v-else>
						<!-- <z-paging
							ref="paging"
							v-model="dataList_2"
							@query="getTab2" 
							auto-show-back-to-top 
							:empty-view-text="emptyText" 
							:empty-view-img="emptyImg" 
						> -->
							<view
								class="content_list_item flex justify-btw align-center" 
								style="padding: 36rpx 0"
								v-for="(item, index) in dataLists" 
								:key="item.id"
								@tap.stop="ToDetail(item)"
							>
								<view class="left flex flex_clm justify-btw align-start">
									<text class="text_4">{{
										item.type==1 ? '微信账号'
										: item.type==2 ? '支付宝账号'
										: item.type==3 ? '银行卡账号'
										: '--'
									}}</text>
									<text class="text_3" style="margin-top: 9rpx;">{{item.createTime}}</text>
								</view>
								<view class="right flex justify-end align-center">
									<view class="flex_clm justify-btw align-end">
										<text class="text_4">￥{{item.price}}</text>
										<text 
											class="text_3" 
											:style="{'color': item.auditStatus==1 ? '#FE941E'
											: item.auditStatus==2 ? '#32B738'
											: item.auditStatus==3 ? '#FF404D'
											: ''
											}"
											style="margin-top: 11rpx;"
										>{{
											item.auditStatus==1 ? '提现审核中'
											: item.auditStatus==2 ? '提现成功'
											: item.auditStatus==3 ? '提现失败'
											: '--'
										}}</text>
									</view>
									<image style="width: 12rpx;height: 20rpx;margin-left: 14rpx;" src="../../static/images/right_arrow.png" mode=""></image>
								</view>
							</view>
						<!-- </z-paging> -->
					</block>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app"
import {useMainStore} from '@/store/index.js'
const mainStore = useMainStore()
const { proxy } = getCurrentInstance()
const balance = ref(0)
const tabList = ref([
	{name: '明细列表'},
	{name: '提现记录'}
])
const sHeight=ref('')
const dataList_1 = ref([])
const dataList_2 = ref([])
const dataLists = ref([])


const current = ref(0)
const emptyText = '没有更多了'
const empty = 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1663661926837.png'
const barStyle = {
	width: '144rpx',
	height: '12rpx',
	background: 'linear-gradient(90deg, #3B8CDC 0%, rgba(59,140,220,0) 100%)',
	borderRadius: '0',
	bottom: '10rpx !important',
	left: '-52rpx',
}


onShow(()=>{
	balance.value = mainStore.userInfo.balance || 0
})
onLoad(()=>{
	// getTab1()
	getStatusHeight()
	mainStore.handleGetUserInfo() //重新获取用户信息
})
function getStatusHeight() {
	sHeight.value = uni.getSystemInfoSync().statusBarHeight + 54 + 'px';
}

// 获取明细列表数据
// function getTab1(pageNo, pageSize){
// 	let query = {
// 		pageNo: pageNo,
// 		pageSize
// 	}
// 	proxy.api.walletRecordList(query).then(res=>{
// 		proxy.$refs.paging.complete(res.data.rows);
// 	})
// }
// 获取明细列表、提现记录数据
function getTabs(pageNo, pageSize){
	let query = {
		pageNo: pageNo,
		pageSize
	}
	if(current.value==0){
		proxy.api.walletRecordList(query).then(res=>{
			proxy.$refs.paging.complete(res.data.data.records);
		})
	} else {
		proxy.api.withdrawalRecordList(query).then(res=>{
			proxy.$refs.paging.complete(res.data.data.records);
		})
	}
	
}

// 切换tab
function handleChangeTab(e) {
	current.value = e
	// // 就这样
	// proxy.$nextTick(()=>{
	// 	if(e==0){
	// 		getTabs(1, 10)
	// 	} else {
	// 		getTabs(1, 10)
	// 	}
	// })
	proxy.$refs.paging.reload();
}
// 跳转到去提现
function ToWithdraw(){
	uni.navigateTo({
		url:`/pages/setting/withdraw?id=${'test'}`
	})
}
// 跳转到提现详情
function ToDetail(row){
	uni.navigateTo({
		url:`/pages/my/withdrawDetail?id=${row.id}&pageType=${'one'}`
	})
}
// 跳转到钱包说明
function ToAgreement(){
	uni.navigateTo({
		url:`/pages/agreement/agreement?pageTitle=钱包说明&code=wallet_explain`
	})
}

</script>

<style lang="scss" scoped>
	::v-deep .u-tab-item{
		font-size: 34rpx !important;
	}
	.text_1{
		@include str(28rpx, 500, #140005);
		line-height: 40rpx;
	}
	.text_2{
		@include str(28rpx, bold, #333);
		line-height: 40rpx;
	}
	.text_3{
		@include str(24rpx, 500, #999);
		line-height: 33rpx;
	}
	.text_4{
		@include str(30rpx, 500, #333);
		line-height: 42rpx;
	}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		.content {
			position: relative;
			// border: 1px solid red;
			&_top {
				position: relative;
				margin-top: 20rpx;
				width: calc(100vw - 40rpx);
				margin-left: 20rpx;
				&_image {
					width: 100%;
					height: 220rpx;
					display: block;
				}
				&_container{
					width: 100%;
					height: 220rpx;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					box-sizing: border-box;
					padding: 40rpx 28rpx 43rpx 32rpx;
					// background-color: rgba(255, 0, 0, 0.4);
					.left{
						.top>text{
							@include str(28rpx, 500, #fff);
							line-height: 40rpx;
							position: relative;
							top: -9rpx;
						}
						.bottom{
							@include str(58rpx, bold, #fff);
							line-height: 81rpx;
						}
					}
					.right{
						width: 172rpx;
						height: 60rpx;
						border-radius: 12rpx;
						border: 2rpx solid #FFFFFF;
						@include str(30rpx, 500, #fff);
						line-height: 42rpx;
					}
				}
			}
			&_list {
				width: calc(100vw - 40rpx);
				margin-left: 20rpx;
				&_item{
					padding: 30rpx 0 27rpx 0;
					border-bottom: 1rpx solid #f5f5f5;
				}
			}
		}
	}
</style>